<template>
  <div>
    <f-button @click="print" type="primary">打印表格</f-button>
    <f-button @click="printWithTable" type="primary">Table表格</f-button>

    <div class="h500">
      <f-table-plan ref="table" v-bind="options"></f-table-plan>
    </div>
  </div>
</template>

<script setup lang="ts">
import { h, reactive, ref } from 'vue';
import { printTable } from '../../packages';
const table = ref();
const printWithTable = () => {
  table.value.print();
};
const options = reactive({
  data: new Array(200).fill(null).map((item) => ({
    name: '张三',
    age: 18,
    sex: '男',
    address: '西藏'
  })),
  columns: [
    { title: '姓名', field: 'name' },
    { title: '年龄', field: 'age' },
    { title: '性别', field: 'sex' },
    { title: '地址', field: 'address' }
  ],
  printConfig: {
    beforePrintMethod: ({ content }) => {
      return '<div>header</div>' + content + '<div>footer></div>';
    }
  }
});

function print() {
  printTable({
    title: '二级标题',
    mainTitle: '西藏阜康医院',
    mainTitleStyle: 'fontsize:16px;color:red;',
    titleStyle: 'fontsize:16px;color:green;',
    columns: [
      {
        title: '姓名',
        field: 'name'
      },
      {
        title: '年龄',
        field: 'age'
      },
      {
        title: '性别',
        field: 'sex'
      },
      {
        title: '地址',
        field: 'address'
      }
    ],
    data: new Array(200).fill(null).map((item) => {
      return {
        name: '李四',
        age: 18,
        sex: '男',
        address: '西藏'
      };
    }),
    bodyCellStyle: 'border:1px solid #000;text-align:center;font-size:14px;',
    renderCell: ({ row, column, rowIndex, columnIndex }) => {
      return h('div', { style: 'height:30px;line-height:30px;' }, row[column.field]);
    },
    tableBeforeContent: `<div style="padding:12px 0;">
    表格上面显示的信息
    </div>`,
    tableAfterContent: `<div style="padding:12px 0;">
    表格下面显示的信息
    </div>`
  });
}
</script>
